import React, {Component} from 'react';
import {StyleSheet, View, Image, Text, TouchableOpacity} from 'react-native';

export default class extends Component {
    //初始值
    state = {
        arrowIcon: require('../../../images/icon_arrow_right.png'),
        linkList: [
            {
                title: '官方公告',
                img: require('./img/icon_notice.png'),
                url: 'notice'
            },
            {
                title: '意见反馈',
                img: require('./img/icon_advice.png'),
                url: 'advice'
            },
            {
                title: '关于我们',
                img: require('./img/icon_about.png'),
                url: 'about'
            }
        ]
    };
    createNav = (list) => {
        const {arrowIcon} = this.state;
        const {navigation} = this.props;
        return list.map(item =>
            <TouchableOpacity
                key={item.title}
                onPress={() => {
                if (item.url) {
                    navigation.navigate(item.url);
                }
            }}>
                <View style={styles.item}>
                    <Image source={item.img} style={styles.img}/>
                    <Text style={styles.title}>{item.title}</Text>
                    <Image source={arrowIcon} style={styles.arrow}/>
                </View>
            </TouchableOpacity>
        )
    };

    render() {
        const {linkList} = this.state;
        return (
            <View style={styles.container}>
                {this.createNav(linkList)}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginTop: 9
    },
    item: {
        marginTop: 1,
        height: 40,
        paddingLeft: 12,
        paddingRight: 12,
        flexDirection: 'row',
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    img: {
        width: 30,
        height: 30
    },
    title: {
        fontSize: 13,
        color: '#000000'
    },
    arrow: {
        width: 30,
        height: 30,
        position: 'absolute',
        right: 12,
        top: 5
    }
});
